<template>
	<view class="chat-user">
		<view class="top">
			<view class="main">
				<!-- 头像 -->
				<view class="avatar-group">
					<image src="@/static/images/chat-1.png" mode="aspectFill" class="avatar" />
					<view class="sex">
						<image src="@/static/icon/brief-icon-1.png" mode="aspectFill" />
					</view>
				</view>

				<!-- 信息 -->
				<view class="info">
					<text class="name">孙漂亮</text>
					<view class="num">
						<image src="@/static/icon/chat-icon.png" mode="aspectFill" />
						<text>56888人</text>
					</view>
				</view>

				<!-- 按钮 -->
				<cl-button round>+关注</cl-button>
			</view>

			<!-- 更多 -->
			<view class="more" @tap="shareShow()"><image src="@/static/icon/chat-more.png" mode="aspectFill" /></view>
		</view>

		<!-- 加入房间列表 -->
		<view class="list">
			<cl-row :gutter="70">
				<cl-col :span="6" v-for="(item, index) in list" :key="index">
					<view class="item" @tap="join(item)">
						<!-- 头像 -->
						<view class="avatar-group">
							<image
								:src="item.avatar"
								mode="aspectFill"
								class="avatar"
								:class="{ 'not-msg': !item.name }"
							/>
							<view class="homeowner" v-if="item.isHomeowner == true">房主</view>
						</view>
						<text class="name">{{ item.name }}</text>
					</view>
				</cl-col>
			</cl-row>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				avatar: require("@/static/images/chat-1.png"),
				name: "孙漂亮",
				isHomeowner: false,
			},
			list: [
				{
					avatar: require("@/static/images/chat-1.png"),
					name: "孙漂亮",
					isHomeowner: true,
				},
				{
					avatar: require("@/static/images/chat-2.png"),
					name: "每天都很棒",
					isHomeowner: false,
				},
				{
					avatar: require("@/static/images/chat-3.png"),
					name: "吴得得儿~",
					isHomeowner: false,
				},
				{
					avatar: require("@/static/images/not-msg.png"),
					name: "",
					isHomeowner: false,
				},
				{
					avatar: require("@/static/images/not-msg.png"),
					name: "",
					isHomeowner: false,
				},
				{
					avatar: require("@/static/images/not-msg.png"),
					name: "",
					isHomeowner: false,
				},
				{
					avatar: require("@/static/images/not-msg.png"),
					name: "",
					isHomeowner: false,
				},
				{
					avatar: require("@/static/images/not-msg.png"),
					name: "",
					isHomeowner: false,
				},
			],
		};
	},
	methods: {
		join(item) {
			if (!item.name) {
				item.name = this.userInfo.name;
				item.avatar = this.userInfo.avatar;
			}
		},
		shareShow(){
			console.log("abcccc");
			uni.$emit('updateShareShow',{})
		}
	},
};
</script>

<style lang="scss">
.chat-user {
	padding: 10rpx 30rpx 0 30rpx;
	.top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 50rpx;
		.main {
			display: flex;
			align-items: center;
			height: 84rpx;
			padding: 0 18rpx 0 12rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 46rpx;
			.avatar-group {
				position: relative;
				margin-right: 18rpx;
				.avatar {
					position: relative;
					top: 4rpx;
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}
				.sex {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 0;
					bottom: 0;
					width: 26rpx;
					height: 26rpx;
					background: #58bcff;
					border-radius: 50%;
					image {
						width: 18rpx;
						height: 18rpx;
					}
				}
			}
			.info {
				margin-right: 20rpx;
				.name {
					font-size: 28rpx;
					font-weight: 400;
					color: #ffffff;
				}
				.num {
					image {
						width: 22rpx;
						height: 18rpx;
						margin-right: 6rpx;
					}
					text {
						font-size: 22rpx;
						font-weight: 400;
						color: #a8a8a8;
					}
				}
			}
			/deep/.cl-button {
				width: 108rpx;
				height: 48rpx;
				background: linear-gradient(92deg, #ff829c 0%, #ff5a70 100%);
				&__text {
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}
		.more {
			display: flex;
			align-items: center;
			width: 48rpx;
			height: 84rpx;
			image {
				width: 48rpx;
				height: 12rpx;
			}
		}
	}
	.list {
		.item {
			height: 180rpx;
			text-align: center;
			.avatar-group {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				width: 120rpx;
				height: 120rpx;
				margin-bottom: 6rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 50%;
				.avatar {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
					&.not-msg {
						width: 36rpx;
						height: 36rpx;
					}
				}
				.homeowner {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					left: calc(50% - 36rpx);
					bottom: -12rpx;
					width: 72rpx;
					height: 36rpx;
					background: #4d8b9d;
					border-radius: 18rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
					z-index: 3;
				}
			}
			.name {
				font-size: 24rpx;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
}
</style>
